<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-09 18:17:18
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-22 17:06:58
 * @FilePath: \ft-apply-admin\src\views\DataCenter\HRStatement\component\Ring.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="ring">
    <div class="chart" ref="chartsRef"></div>
  </div>
</template>

<script setup lang='ts'>
import { computed, ref, defineProps, onMounted, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { getRingOptions } from './data';
const chartsRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartsRef);
const props = defineProps(['list', 'target'])
watch(() => props.list, (val) => {
  if (val.length > 0) {
    const data = props.list.map(el => {
      return {
        value: el.value,
        name: el.text,
        color: el.color,
        number:el.number
      }
    })
    console.log(data,'data')
    const options = getRingOptions(data, props.target);
    setOptions(options)
  }
},{ deep: true })


</script>
<style lang="less" scoped>
.chart {
  height: 220px;
  width: 100%;
}
</style>